<route lang="json">
{
    "name": "productManage",
    "meta": {
        "title": "控制台-商品管理",
        "requiresAuth": true
    }
}
</route>

<script setup lang="ts">
// 确保FormData在全局可用
import type { UploadRequestOptions } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { computed, onMounted, reactive, ref } from 'vue'
import { uploadImage } from '~/api/file'
import { addProduct as apiAddProduct, deleteProduct, getCategory, getProDetail, getProList, updateProduct, updateProductFlag } from '~/api/pro'

declare global {
  interface Window {
    FormData: typeof FormData
  }
}

// 定义商品接口类型
interface Product {
  proid: string
  proname: string
  originprice: number
  discount?: number
  sales?: number
  stock?: number
  desc?: string
  brand?: string
  category?: string
  img1?: string
  img2?: string
  img3?: string
  img4?: string
  imgs?: string[]
  banners?: string[]
  isrecommend?: number
  isseckill?: number
  issale?: number
  createTime?: string
  updateTime?: string
  [key: string]: any
}

// 商品列表数据
const productList = ref<Product[]>([])
const loading = ref(false)

// 商品分类数据
const categoryList = ref<string[]>([])
const categoryLoading = ref(false)

// 获取商品分类
function fetchCategoryList() {
  categoryLoading.value = true
  getCategory()
    .then((res) => {
      if (res && Array.isArray(res)) {
        categoryList.value = res
      }
      else if (res && Array.isArray(res.data)) {
        categoryList.value = res.data
      }
      else {
        categoryList.value = []
      }
    })
    .catch((error) => {
      console.error('获取商品分类失败:', error)
      ElMessage.error('获取商品分类失败')
      categoryList.value = []
    })
    .finally(() => {
      categoryLoading.value = false
    })
}

// 表格分页
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
})

// 搜索条件
const searchForm = reactive({
  proname: '',
  category: '',
  brand: '',
})

// 获取商品列表
function fetchProductList() {
  loading.value = true

  const params: Record<string, any> = {
    count: pagination.currentPage,
    limitNum: pagination.pageSize,
    ...searchForm,
  }

  // 过滤掉空值
  Object.keys(params).forEach((key) => {
    if (params[key] === '' || params[key] === undefined || params[key] === null) {
      delete params[key]
    }
  })

  getProList(params)
    .then((res) => {
      if (res && typeof res === 'object') {
        if (Array.isArray(res)) {
          productList.value = res
          pagination.total = res.length
        }
        else if (Array.isArray(res.data)) {
          productList.value = res.data
          pagination.total = res.total || res.data.length
        }
        else {
          productList.value = []
          pagination.total = 0
        }
      }
      else {
        productList.value = []
        pagination.total = 0
      }
    })
    .catch((error) => {
      console.error('获取商品列表失败:', error)
      ElMessage.error('获取商品列表失败')
      productList.value = []
      pagination.total = 0
    })
    .finally(() => {
      loading.value = false
    })
}

// 处理分页变化
function handleCurrentChange(val: number) {
  pagination.currentPage = val
  fetchProductList() // 切换页码时重新获取数据
}

function handleSizeChange(val: number) {
  pagination.pageSize = val
  pagination.currentPage = 1
  fetchProductList() // 切换每页条数时重新获取数据
}

// 搜索
function handleSearch() {
  pagination.currentPage = 1
  fetchProductList()
}

// 重置搜索
function resetSearch() {
  Object.assign(searchForm, {
    proname: '',
    brand: '',
    category: '',
  })
  pagination.currentPage = 1
  fetchProductList()
}

// 计算当前页的数据
const currentPageData = computed(() => {
  return productList.value
})

// 删除商品
function handleDelete(row: Product) {
  ElMessageBox.confirm('确定要删除该商品吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    try {
      await deleteProduct(row.proid)
      ElMessage.success('删除成功')
      fetchProductList()
    }
    catch (error) {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }).catch(() => {})
}

// 更新商品标志
function updateFlag(id: string, flag: string, value: number) {
  updateProductFlag(id, flag, !!value)
    .then(() => {
      ElMessage.success('更新成功')
      fetchProductList()
    })
    .catch((error) => {
      console.error('更新失败:', error)
      ElMessage.error('更新失败')
    })
}

// 切换推荐状态
function toggleRecommend(row: Product) {
  const newValue = row.isrecommend === 1 ? 0 : 1
  updateFlag(row.proid, 'isrecommend', newValue)
}

// 切换秒杀状态
function toggleSeckill(row: Product) {
  const newValue = row.isseckill === 1 ? 0 : 1
  updateFlag(row.proid, 'isseckill', newValue)
}

// 切换上架状态
function toggleSale(row: Product) {
  const newValue = row.issale === 1 ? 0 : 1
  updateFlag(row.proid, 'issale', newValue)
}

// 查看商品详情
const detailDialogVisible = ref(false)
const currentProduct = ref<Product | null>(null)
const detailLoading = ref(false)

function viewProductDetail(id: string) {
  detailLoading.value = true
  getProDetail(id)
    .then((res) => {
      if (res) {
        currentProduct.value = res[0]
        detailDialogVisible.value = true
      }
    })
    .catch((error) => {
      console.error('获取商品详情失败:', error)
      ElMessage.error('获取商品详情失败')
    })
    .finally(() => {
      detailLoading.value = false
    })
}

// 添加/编辑商品对话框控制
const editDialogVisible = ref(false)
const editDialogTitle = ref('添加商品')
const editFormLoading = ref(false)

// 编辑表单数据
const editFormData = reactive<Partial<Product>>({
  proname: '',
  originprice: 0,
  discount: 10,
  brand: '',
  category: '',
  desc: '',
  img1: '',
  img2: '',
  img3: '',
  img4: '',
  stock: 0,
  isrecommend: 0,
  isseckill: 0,
  issale: 1,
})

// 表单规则
const editFormRules = {
  proname: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
  originprice: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
  category: [{ required: true, message: '请输入商品分类', trigger: 'blur' }],
  img1: [{ required: true, message: '请上传商品主图', trigger: 'change' }],
}

const editFormRef = ref()

// 添加商品
function addProduct() {
  editDialogTitle.value = '添加商品'
  Object.assign(editFormData, {
    proname: '',
    originprice: 0,
    discount: 10,
    brand: '',
    category: '',
    desc: '',
    img1: '',
    img2: '',
    img3: '',
    img4: '',
    stock: 0,
    isrecommend: 0,
    isseckill: 0,
    issale: 1,
  })
  editDialogVisible.value = true
}

// 编辑商品
function editProduct(id: string) {
  editDialogTitle.value = '编辑商品'
  // 获取商品详情并填充表单
  detailLoading.value = true
  getProDetail(id)
    .then((res) => {
      if (res && res[0]) {
        const product = res[0]
        Object.assign(editFormData, {
          proid: product.proid,
          proname: product.proname,
          originprice: product.originprice,
          discount: product.discount || 10,
          brand: product.brand || '',
          category: product.category || '',
          desc: product.desc || '',
          img1: product.img1 || '',
          img2: product.img2 || '',
          img3: product.img3 || '',
          img4: product.img4 || '',
          stock: product.stock || 0,
          isrecommend: product.isrecommend || 0,
          isseckill: product.isseckill || 0,
          issale: product.issale || 1,
        })
        editDialogVisible.value = true
      }
    })
    .catch((error) => {
      console.error('获取商品详情失败:', error)
      ElMessage.error('获取商品详情失败')
    })
    .finally(() => {
      detailLoading.value = false
    })
}

// 提交表单
function submitEditForm() {
  if (!editFormRef.value)
    return

  editFormRef.value.validate((valid: boolean) => {
    if (!valid)
      return

    editFormLoading.value = true

    // 准备提交的数据
    const submitData = {
      proname: editFormData.proname || '', // 确保不为undefined
      originprice: String(editFormData.originprice || 0), // API需要字符串类型
      desc: editFormData.desc || '',
      brand: editFormData.brand || '',
      category: editFormData.category || '',
      img1: editFormData.img1 || '',
      img2: editFormData.img2 || '',
      img3: editFormData.img3 || '',
      img4: editFormData.img4 || '',
    }

    // 根据是否有proid判断是添加还是更新
    if (editFormData.proid) {
      // 更新商品
      updateProduct(editFormData.proid, submitData)
        .then(() => {
          ElMessage.success('更新商品成功')
          editDialogVisible.value = false
          fetchProductList()
        })
        .catch((error) => {
          console.error('更新商品失败:', error)
          ElMessage.error('更新商品失败')
        })
        .finally(() => {
          editFormLoading.value = false
        })
    }
    else {
      // 添加商品
      apiAddProduct(submitData)
        .then(() => {
          ElMessage.success('添加商品成功')
          editDialogVisible.value = false
          fetchProductList()
        })
        .catch((error) => {
          console.error('添加商品失败:', error)
          ElMessage.error('添加商品失败')
        })
        .finally(() => {
          editFormLoading.value = false
        })
    }
  })
}

// 拒绝Promise的辅助函数
function rejectPromise(err: any): Promise<never> {
  return Promise.reject(err)
}

// 处理文件上传
function handleFileUpload(options: UploadRequestOptions) {
  const formData = new FormData()
  formData.append('img', options.file)
  return uploadImage(formData).then((res: any) => {
    options.onSuccess(res)
  }).catch((err: any) => {
    options.onError(err)
    return rejectPromise(err)
  })
}

// 上传图片成功回调
function handleImageUploadSuccess(res: any, fieldName: string) {
  const fileUrl = res.fileUrl || res.data?.fileUrl || ''
  if (fileUrl) {
    editFormData[fieldName as keyof typeof editFormData] = `http://47.94.6.186:3001${fileUrl}`
  }
}

// 处理商品状态显示
function getStatusTag(value: number | undefined) {
  return value === 1 ? '是' : '否'
}

// 处理商品状态类型
function getStatusType(value: number | undefined) {
  return value === 1 ? 'success' : 'info'
}

function createFormData() {
  return new FormData()
}

// 页面加载时获取商品列表和分类
onMounted(() => {
  fetchProductList()
  fetchCategoryList()
})
</script>

<template>
  <div class="product-manage-container">
    <div class="product-header">
      <h2 class="product-title">
        商品管理
      </h2>
      <el-button type="primary" @click="addProduct">
        添加商品
      </el-button>
    </div>

    <!-- 搜索区域 -->
    <el-card shadow="hover" class="search-card">
      <el-form :model="searchForm" inline>
        <el-form-item label="商品名称" style="width: 300px;">
          <el-input v-model="searchForm.proname" placeholder="请输入商品名称" clearable style="width: 220px;" />
        </el-form-item>
        <el-form-item label="分类" style="width: 250px;">
          <el-select
            v-model="searchForm.category" placeholder="请选择分类" clearable style="width: 180px;"
            :loading="categoryLoading"
          >
            <el-option v-for="item in categoryList" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="品牌" style="width: 250px;">
          <el-input v-model="searchForm.brand" placeholder="请输入品牌" clearable style="width: 180px;" />
        </el-form-item>
        <el-form-item class="w-full">
          <el-button type="primary" class="ml-auto" @click="handleSearch">
            搜索
          </el-button>
          <el-button class="mr-[90px]" @click="resetSearch">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 商品列表 -->
    <el-card shadow="hover" class="product-card">
      <el-table v-loading="loading" :data="currentPageData" stripe border style="width: 100%">
        <!-- 序号列 -->
        <el-table-column type="index" label="序号" width="60" />

        <!-- 商品图片列 -->
        <el-table-column label="商品图片" width="100">
          <template #default="scope">
            <el-image
              v-if="scope.row.img1"
              :src="scope.row.img1"
              preview-teleported
              :preview-src-list="[scope.row.img1]"
              fit="cover"
              style="width: 80px; height: 80px"
              lazy
            />
            <div v-else class="no-image">
              无图片
            </div>
          </template>
        </el-table-column>

        <!-- 商品名称列 -->
        <el-table-column prop="proname" label="商品名称" min-width="180" show-overflow-tooltip />

        <!-- 价格列 -->
        <el-table-column prop="originprice" label="价格" width="100">
          <template #default="scope">
            ¥{{ scope.row.originprice.toFixed(2) }}
          </template>
        </el-table-column>

        <!-- 品牌列 -->
        <el-table-column prop="brand" label="品牌" width="120">
          <template #default="scope">
            {{ scope.row.brand || '-' }}
          </template>
        </el-table-column>

        <!-- 分类列 -->
        <el-table-column prop="category" label="分类" width="120">
          <template #default="scope">
            {{ scope.row.category || '-' }}
          </template>
        </el-table-column>

        <!-- 推荐列 -->
        <el-table-column label="推荐" width="80">
          <template #default="scope">
            <el-switch :model-value="scope.row.isrecommend === 1" @change="toggleRecommend(scope.row)" />
          </template>
        </el-table-column>

        <!-- 秒杀列 -->
        <el-table-column label="秒杀" width="80">
          <template #default="scope">
            <el-switch :model-value="scope.row.isseckill === 1" @change="toggleSeckill(scope.row)" />
          </template>
        </el-table-column>

        <!-- 上架列 -->
        <el-table-column label="上架" width="80">
          <template #default="scope">
            <el-switch :model-value="scope.row.issale === 1" @change="toggleSale(scope.row)" />
          </template>
        </el-table-column>

        <!-- 折扣列 -->
        <el-table-column label="折扣" width="80">
          <template #default="scope">
            {{ scope.row.discount || '-' }}
          </template>
        </el-table-column>

        <!-- 销量列 -->
        <el-table-column label="销量" width="100">
          <template #default="scope">
            {{ scope.row.sales || 0 }}
          </template>
        </el-table-column>

        <!-- 库存列 -->
        <el-table-column label="库存" width="100">
          <template #default="scope">
            {{ scope.row.stock || 0 }}
          </template>
        </el-table-column>

        <!-- 创建时间列 -->
        <el-table-column prop="createTime" label="创建时间" min-width="180">
          <template #default="scope">
            {{ scope.row.createTime || '-' }}
          </template>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button type="primary" link @click="viewProductDetail(scope.row.proid)">
              查看
            </el-button>
            <el-button type="primary" link @click="editProduct(scope.row.proid)">
              编辑
            </el-button>
            <el-button type="danger" link @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 商品详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="商品详情" width="700px" destroy-on-close>
      <div v-loading="detailLoading" class="product-detail">
        <template v-if="currentProduct">
          <div class="detail-section">
            <h3 class="section-title">
              基本信息
            </h3>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="商品名称">
                {{ currentProduct.proname }}
              </el-descriptions-item>
              <el-descriptions-item label="商品价格">
                ¥{{ currentProduct.originprice?.toFixed(2) }}
              </el-descriptions-item>
              <el-descriptions-item label="品牌">
                {{ currentProduct.brand || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="分类">
                {{ currentProduct.category || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="折扣">
                {{ currentProduct.discount || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="销量">
                {{ currentProduct.sales || 0 }}
              </el-descriptions-item>
              <el-descriptions-item label="库存">
                {{ currentProduct.stock || 0 }}
              </el-descriptions-item>
              <el-descriptions-item label="是否推荐">
                <el-tag :type="getStatusType(currentProduct.isrecommend)">
                  {{ getStatusTag(currentProduct.isrecommend) }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="是否秒杀">
                <el-tag :type="getStatusType(currentProduct.isseckill)">
                  {{ getStatusTag(currentProduct.isseckill) }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="是否上架">
                <el-tag :type="getStatusType(currentProduct.issale)">
                  {{ getStatusTag(currentProduct.issale) }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="创建时间">
                {{ currentProduct.createTime || '-' }}
              </el-descriptions-item>
            </el-descriptions>
          </div>

          <div class="detail-section">
            <h3 class="section-title">
              商品描述
            </h3>
            <div class="product-desc">
              {{ currentProduct.desc || '暂无描述' }}
            </div>
          </div>

          <div class="detail-section">
            <h3 class="section-title">
              商品图片
            </h3>
            <div class="product-images">
              <div v-if="currentProduct.img1" class="image-item">
                <el-image
                  :src="currentProduct.img1" :preview-src-list="[currentProduct.img1]" fit="cover"
                  style="width: 150px; height: 150px"
                />
                <div class="image-label">
                  主图
                </div>
              </div>
              <div v-if="currentProduct.img2" class="image-item">
                <el-image
                  :src="currentProduct.img2" :preview-src-list="[currentProduct.img2]" fit="cover"
                  style="width: 150px; height: 150px"
                />
                <div class="image-label">
                  图片2
                </div>
              </div>
              <div v-if="currentProduct.img3" class="image-item">
                <el-image
                  :src="currentProduct.img3" :preview-src-list="[currentProduct.img3]" fit="cover"
                  style="width: 150px; height: 150px"
                />
                <div class="image-label">
                  图片3
                </div>
              </div>
              <div v-if="currentProduct.img4" class="image-item">
                <el-image
                  :src="currentProduct.img4" :preview-src-list="[currentProduct.img4]" fit="cover"
                  style="width: 150px; height: 150px"
                />
                <div class="image-label">
                  图片4
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </el-dialog>

    <!-- 添加/编辑商品对话框 -->
    <el-dialog v-model="editDialogVisible" :title="editDialogTitle" width="700px" destroy-on-close>
      <el-form ref="editFormRef" :model="editFormData" :rules="editFormRules" label-width="100px">
        <el-form-item label="商品名称" prop="proname">
          <el-input v-model="editFormData.proname" placeholder="请输入商品名称" />
        </el-form-item>

        <el-form-item label="商品价格" prop="originprice">
          <el-input-number v-model="editFormData.originprice" :min="0" :precision="2" :step="0.01" />
        </el-form-item>

        <el-form-item label="折扣" prop="discount">
          <el-input-number v-model="editFormData.discount" :min="0" :max="10" :step="0.1" />
        </el-form-item>

        <el-form-item label="库存" prop="stock">
          <el-input-number v-model="editFormData.stock" :min="0" :step="1" />
        </el-form-item>

        <el-form-item label="品牌" prop="brand">
          <el-input v-model="editFormData.brand" placeholder="请输入品牌" />
        </el-form-item>

        <el-form-item label="分类" prop="category">
          <el-select
            v-model="editFormData.category" placeholder="请选择分类" filterable style="width: 100%;"
            :loading="categoryLoading"
          >
            <el-option v-for="item in categoryList" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>

        <el-form-item label="商品描述" prop="desc">
          <el-input v-model="editFormData.desc" type="textarea" :rows="4" placeholder="请输入商品描述" />
        </el-form-item>

        <el-form-item label="主图" prop="img1">
          <el-upload
            class="product-upload" action="/admin/file/upload" :show-file-list="false"
            :on-success="(res) => handleImageUploadSuccess(res, 'img1')" :http-request="handleFileUpload"
          >
            <el-image v-if="editFormData.img1" :src="editFormData.img1" fit="cover" class="upload-image" />
            <div v-else class="upload-placeholder">
              <el-icon>
                <Plus />
              </el-icon>
              <div>点击上传</div>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="图片2" prop="img2">
          <el-upload
            class="product-upload" action="/api/admin/file/upload" :show-file-list="false"
            :on-success="(res: any) => handleImageUploadSuccess(res, 'img2')" :http-request="handleFileUpload"
          >
            <el-image v-if="editFormData.img2" :src="editFormData.img2" fit="cover" class="upload-image" />
            <div v-else class="upload-placeholder">
              <el-icon>
                <Plus />
              </el-icon>
              <div>点击上传</div>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="图片3" prop="img3">
          <el-upload
            class="product-upload" action="/api/admin/file/upload" :show-file-list="false"
            :on-success="(res: any) => handleImageUploadSuccess(res, 'img3')" :http-request="(options: UploadRequestOptions) => {
              const formData = createFormData();
              formData.append('img', options.file);
              return uploadImage(formData).then((res: any) => {
                options.onSuccess(res);
              }).catch((err: any) => {
                options.onError(err);
                return rejectPromise(err);
              });
            }"
          >
            <el-image v-if="editFormData.img3" :src="editFormData.img3" fit="cover" class="upload-image" />
            <div v-else class="upload-placeholder">
              <el-icon>
                <Plus />
              </el-icon>
              <div>点击上传</div>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="图片4" prop="img4">
          <el-upload
            class="product-upload" action="/api/admin/file/upload" :show-file-list="false"
            :on-success="(res: any) => handleImageUploadSuccess(res, 'img4')" :http-request="handleFileUpload"
          >
            <el-image v-if="editFormData.img4" :src="editFormData.img4" fit="cover" class="upload-image" />
            <div v-else class="upload-placeholder">
              <el-icon>
                <Plus />
              </el-icon>
              <div>点击上传</div>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="是否推荐">
          <el-switch v-model="editFormData.isrecommend" :active-value="1" :inactive-value="0" />
        </el-form-item>

        <el-form-item label="是否秒杀">
          <el-switch v-model="editFormData.isseckill" :active-value="1" :inactive-value="0" />
        </el-form-item>

        <el-form-item label="是否上架">
          <el-switch v-model="editFormData.issale" :active-value="1" :inactive-value="0" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" :loading="editFormLoading" @click="submitEditForm">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.product-manage-container {
  padding: 20px;

  .product-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .product-title {
      font-size: 20px;
      font-weight: 600;
      margin: 0;
    }
  }

  .search-card {
    margin-bottom: 20px;

    .price-separator {
      margin: 0 5px;
    }
  }

  .product-card {
    margin-bottom: 20px;
  }

  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

  .no-image {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f7fa;
    color: #909399;
    border: 1px dashed #d9d9d9;
  }

  .product-detail {
    .detail-section {
      margin-bottom: 20px;

      .section-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
        padding-left: 10px;
        border-left: 3px solid #409eff;
      }

      .product-desc {
        padding: 15px;
        background-color: #f5f7fa;
        border-radius: 4px;
        min-height: 100px;
        white-space: pre-wrap;
      }

      .product-images {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;

        .image-item {
          position: relative;

          .image-label {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            text-align: center;
            padding: 3px 0;
            font-size: 12px;
          }
        }
      }
    }
  }
}

.product-upload {
  .upload-image {
    width: 150px;
    height: 150px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .upload-placeholder {
    width: 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    color: #8c939d;

    .el-icon {
      font-size: 28px;
      margin-bottom: 8px;
    }
  }
}
</style>
